<template>
  <div @mouseenter="tipBoxEnter($event)" @mouseleave="tipBoxLeave($event)">
    <p
      class="too-tip-content-p"
      :style="{maxWidth: optionMaxWidth + 'px'}"
    >
      <slot></slot>
    </p>
  </div>
</template>

<script>
export default {
  name: 'tool-tip-ellipsis',
  props: {
    // 最大宽度，可忽略
    optionMaxWidth: {
      type: Number
    },
    // 内容
    toolTipContent: {
      type: String,
      default: ''
    },
    // 位置
    placement: {
      type: String,
      default: 'bottom'
    }
  },
  methods: {
    tipBoxEnter (e) {
      // 获取挂载的p标签
      // eslint-disable-next-line camelcase
      let p_Node = e.target.querySelector('.too-tip-content-p')
      // 如果文本溢出
      // if (p_Node.scrollWidth > p_Node.offsetWidth) {
      // 初始化全局toolTip
      console.log(this.toolTipContent, this.placement)
      this.$store.commit('INIT_TOOL_TIP', {
        node: p_Node,
        content: this.toolTipContent,
        placement: this.placement
      })
      // }
    },
    tipBoxLeave (e) {
      // 销毁toolTip
      this.$store.commit('CLOSE_TOOL_TIP')
    }
  }
}
</script>

<style scoped>
.too-tip-content-p {
  padding: 0;
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
